<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %><jsp:useBean id="definitionManager" scope="application" class="org.languageguide.readings.DefinitionManager" /><html>
<head>
<%
	response.setHeader("Cache-Control","no-cache"); 
	response.setHeader("Pragma","no-cache"); 
	response.setDateHeader ("Expires", -1); 

	String readingIdStr = request.getParameter("id");
    Integer readingId = Integer.parseInt(readingIdStr);
	
    //String numberOfRows = "10";
    String target = request.getParameter("target");
	org.languageguide.readings.TranslatedReading reading = org.languageguide.readings.ReadingManager.getReading(readingIdStr, target);
	java.util.List<org.languageguide.readings.Definition> definitionsWithTranslations =  definitionManager.loadDefinitionTranslations(readingId, target); 
	
	Integer numberOfRows =  definitionsWithTranslations.size();
	System.out.println(numberOfRows);
	String redirectLocation = "/user/readings/translate_reading_def.jsp?";
%>
<%@ include file="/user/load_user_with_redirect_specifiy_url.jsp" %>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script>
var currentId;
var translateNext = false;
function translateAll(){
	translateNext = true;
	translateRow(1);
}
function translateRow(order){
	currentId = order;
	var elem = document.getElementById(currentId);
	if (elem== null && translateNext){
		translateNext = false;
		return;
	}
	
	translate(elem.innerHTML);
}

function translateText(response) {
		var elem = document.getElementById("t" + currentId);
        var text = response.data.translations[0].translatedText;
		text = text.replace("&#39;", "'");
		elem.value =  text;
		elem.style.background= "pink";
		if (translateNext){
			currentId++;
			translateRow(currentId);
		}
		//value++;	
  }

  function translate(toTranslate){
	var newScript = document.createElement('script');
    newScript.type = 'text/javascript';
    //var sourceText = escape(document.getElementById("sourceText").innerHTML);
      // WARNING: be aware that YOUR-API-KEY inside html is viewable by all your users.
      // Restrict your key to designated domains or use a proxy to hide your key
      // to avoid misuage by other party.
      var source = 'https://www.googleapis.com/language/translate/v2?key=AIzaSyDtujJfQf7WTn4TPnm99CwbVKWqPjQbu5E&source=en&target=<%= target %>&callback=translateText&q=' + toTranslate;
      newScript.src = source;

      // When we add this script to the head, the request is sent off.
      document.getElementsByTagName('head')[0].appendChild(newScript);
}

</script>
<title>Untitled Document</title>
<% if (target.equals("ar")){ %>
<style>
	textarea{
		direction:rtl
	}
</style>
<% } %>

</head>

<body>
<button type="button" onClick="translateAll()">Google Translate</button>
<form name="form1" method="post" onSubmit="return allowSubmit()" action="translate_reading_def_save.jsp">
  <table width="100%" border="0" cellpadding="3" cellspacing="1" align="center">
<% 
int order = 0;
for (org.languageguide.readings.Definition definition: definitionsWithTranslations){ 
order++;
%>
<tr><td><div id="<%= order %>"><%= definition.getHeader() %></div>
<div style="color:blue; font-style:oblique; font-size:90%"><%= definition.getType() %></div>
</td><td>
				<textarea rows="3" cols="100" id="t<%= order %>" name="<%= definition.getKey() %>"><%= definition.getTranslationBody() %></textarea>			
</td><td><button type="button" onClick="translateRow(<%= order %>)">Google Translate</button></td></tr>
 <%  } %>
  </table>
  <blockquote>
    <p><br>
    </p>
  </blockquote>
  <div align="center">
    <blockquote>
      <p>
        <%
boolean approved = reading.hasApprovedDefinitions();
String checkedStr;
if (approved){
	checkedStr = "checked";
}
else{
	checkedStr = "";
}
%>
        <input name="approve_all" type="checkbox" value="all" <%= checkedStr %>>Approve All Translations<br>
        
        <input type="submit" name="translation.submit" id="saveButton" value="Save" style="font-weight:bold; font-size: 120%">   <input type="submit" name="translation.submit"  value="Cancel" id="cancelButton" style="font-weight:bold; font-size: 120%; margin-left 20px;">
      </p>
    </blockquote>
  </div>
  
  <blockquote>
    <p>
      <input name="readingId" type="hidden" value="<%= readingId %>">
      <input name="target" type="hidden" value="<%= target %>">

      
      
    </p>
  </blockquote>
</form>
</body>
</html>